<template>
  <div class="home">
    <!-- Hero Section with 3D Background -->
    <section class="hero-section position-relative">
      <div id="hero-3d" class="hero-3d-container"></div>
      <div class="hero-overlay"></div>
      <div class="container position-relative">
        <div class="row align-items-center min-vh-100">
          <div class="col-lg-6" data-aos="fade-right">
            <div class="hero-content">
              <h1 class="hero-title mb-4">
                <span class="gradient-text">Music</span> is the
                <span class="gradient-text">Universal</span> Language
              </h1>
              <p class="hero-subtitle mb-4">
                探索音乐的无限世界，感受艺术的独特魅力。让每一个音符都触动你的心弦。
              </p>
              <div class="hero-buttons">
                <router-link to="/albums" class="btn btn-primary btn-lg me-3">
                  <i class="fas fa-compact-disc me-2"></i>探索专辑
                </router-link>
                <router-link to="/artists" class="btn btn-outline-light btn-lg">
                  <i class="fas fa-microphone me-2"></i>认识艺术家
                </router-link>
              </div>
            </div>
          </div>
          <div class="col-lg-6" data-aos="fade-left" data-aos-delay="200">
            <div class="hero-image-container">
              <div class="floating-card">
                <img src="../assets/img/hero/1.jpg" alt="Hero Image" class="img-fluid rounded-3 shadow-lg">
                <div class="music-visualizer">
                  <div class="bar" v-for="n in 20" :key="n" :style="{animationDelay: n * 0.1 + 's'}"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Floating elements -->
      <div class="floating-elements">
        <div class="floating-note note-1"><i class="fas fa-music"></i></div>
        <div class="floating-note note-2"><i class="fas fa-music"></i></div>
        <div class="floating-note note-3"><i class="fas fa-music"></i></div>
      </div>
    </section>

    <!-- Featured Albums Section -->
    <section class="featured-albums py-5">
      <div class="container">
        <div class="text-center mb-5" data-aos="fade-up">
          <h2 class="section-title">精选专辑</h2>
          <p class="section-subtitle">发现最新最热的音乐作品</p>
        </div>
        
        <div class="row">
          <div 
            v-for="(album, index) in featuredAlbums" 
            :key="index"
            class="col-lg-3 col-md-6 mb-4"
            data-aos="fade-up"
            :data-aos-delay="index * 100"
          >
            <div class="album-card glass">
              <div class="album-image-container">
                <img :src="album.image" :alt="album.title" class="album-image">
                <div class="album-overlay">
                  <button class="play-btn">
                    <i class="fas fa-play"></i>
                  </button>
                </div>
              </div>
              <div class="album-info p-3">
                <h5 class="album-title">{{ album.title }}</h5>
                <p class="album-artist">{{ album.artist }}</p>
                <div class="album-meta">
                  <span><i class="fas fa-clock me-1"></i>{{ album.duration }}</span>
                  <span><i class="fas fa-calendar me-1"></i>{{ album.year }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Artists Showcase -->
    <section class="artists-showcase py-5 gradient-bg">
      <div class="container">
        <div class="text-center mb-5" data-aos="fade-up">
          <h2 class="section-title text-white">明星艺术家</h2>
          <p class="section-subtitle text-white">遇见才华横溢的音乐人</p>
        </div>
        
        <div class="artists-slider" data-aos="fade-up" data-aos-delay="200">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div v-for="(artist, index) in featuredArtists" :key="index" class="swiper-slide">
                <div class="artist-card">
                  <div class="artist-image-container">
                    <img :src="artist.image" :alt="artist.name" class="artist-image">
                    <div class="artist-overlay">
                      <div class="artist-info">
                        <h4 class="artist-name">{{ artist.name }}</h4>
                        <p class="artist-genre">{{ artist.genre }}</p>
                        <div class="artist-stats">
                          <span><i class="fas fa-users me-1"></i>{{ artist.followers }}</span>
                          <span><i class="fas fa-music me-1"></i>{{ artist.tracks }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-pagination"></div>
          </div>
        </div>
      </div>
    </section>

    <!-- Latest Shows -->
    <section class="latest-shows py-5">
      <div class="container">
        <div class="text-center mb-5" data-aos="fade-up">
          <h2 class="section-title">即将到来的演出</h2>
          <p class="section-subtitle">不要错过精彩的现场表演</p>
        </div>
        
        <div class="row">
          <div 
            v-for="(show, index) in upcomingShows" 
            :key="index"
            class="col-lg-4 col-md-6 mb-4"
            data-aos="fade-up"
            :data-aos-delay="index * 100"
          >
            <div class="show-card glass">
              <div class="show-image-container">
                <img :src="show.image" :alt="show.title" class="show-image">
                <div class="show-date">
                  <span class="date-day">{{ show.day }}</span>
                  <span class="date-month">{{ show.month }}</span>
                </div>
              </div>
              <div class="show-info p-4">
                <h5 class="show-title">{{ show.title }}</h5>
                <p class="show-venue"><i class="fas fa-map-marker-alt me-2"></i>{{ show.venue }}</p>
                <p class="show-time"><i class="fas fa-clock me-2"></i>{{ show.time }}</p>
                <div class="show-price">
                  <span class="price">¥{{ show.price }}</span>
                  <button class="btn btn-sm btn-primary">购票</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Music Journey Section -->
    <section class="music-journey py-5">
      <div class="container">
        <div class="text-center mb-5" data-aos="fade-up">
          <h2 class="section-title">音乐之旅</h2>
          <p class="section-subtitle">探索不同音乐风格的独特魅力</p>
        </div>
        
        <!-- Loading State -->
        <div v-if="contentLoading" class="text-center py-5">
          <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">加载中...</span>
          </div>
          <p class="mt-3 text-muted">正在加载精彩内容...</p>
        </div>
        
        <!-- Error State -->
        <div v-else-if="contentError" class="text-center py-5">
          <i class="fas fa-exclamation-triangle fa-3x text-warning mb-3"></i>
          <h4 class="text-muted">内容加载失败</h4>
          <p class="text-muted">{{ contentError }}</p>
          <button class="btn btn-primary" @click="loadHomeContent">重新加载</button>
        </div>
        
        <!-- Content -->
        <div v-else class="row">
          <div v-for="(genre, index) in musicGenres" :key="index" class="col-lg-4 col-md-6 mb-4" 
               data-aos="fade-up" :data-aos-delay="index * 100">
            <div class="genre-card glass">
              <div class="genre-icon">
                <i :class="genre.icon"></i>
              </div>
              <h4 class="genre-title">{{ genre.name }}</h4>
              <p class="genre-description">{{ genre.description }}</p>
              <div class="genre-features">
                <span v-for="feature in genre.features" :key="feature" class="feature-tag">
                  {{ feature }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Music Stats Section -->
    <section class="music-stats py-5 gradient-bg-3">
      <div class="container">
        <div class="text-center mb-5" data-aos="fade-up">
          <h2 class="section-title text-white">平台数据</h2>
          <p class="section-subtitle text-white">用数字见证音乐的力量</p>
        </div>
        
        <div v-if="!contentLoading && !contentError" class="row text-center">
          <div v-for="(stat, index) in platformStats" :key="index" class="col-lg-3 col-md-6 mb-4" 
               data-aos="zoom-in" :data-aos-delay="index * 150">
            <div class="stat-card glass">
              <div class="stat-icon">
                <i :class="stat.icon"></i>
              </div>
              <div class="stat-number" :data-target="stat.value">{{ stat.displayValue }}</div>
              <div class="stat-label">{{ stat.label }}</div>
              <div class="stat-description">{{ stat.description }}</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Newsletter Section -->
    <section class="newsletter py-5 gradient-bg-2">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-lg-8 text-center" data-aos="fade-up">
            <h3 class="text-white mb-3">加入我们的音乐社区</h3>
            <p class="text-white mb-4">第一时间获取最新音乐动态、独家内容和艺术家访谈。成为超过100万音乐爱好者中的一员，共同探索音乐的无限可能。</p>
            <div class="newsletter-form">
              <div class="input-group">
                <input type="email" class="form-control" placeholder="输入您的邮箱地址">
                <button class="btn btn-light" type="button">
                  <i class="fas fa-paper-plane me-2"></i>立即订阅
                </button>
              </div>
              <small class="text-white-50 mt-2 d-block">
                我们承诺不会向第三方分享您的邮箱信息，您可以随时取消订阅
              </small>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import * as THREE from 'three'
import axios from 'axios'

export default {
  name: 'Home',
  data() {
    return {
      // API 相关状态
      contentLoading: true,
      contentError: null,
      musicGenres: [],
      platformStats: [],
      featuredAlbums: [
        {
          title: '星空下的旋律',
          artist: '梦想乐队',
          image: require('../assets/img/albums/1.jpg'),
          duration: '45:32',
          year: '2024'
        },
        {
          title: '城市夜曲',
          artist: '都市歌者',
          image: require('../assets/img/albums/2.jpg'),
          duration: '38:45',
          year: '2024'
        },
        {
          title: '回忆的声音',
          artist: '时光乐团',
          image: require('../assets/img/albums/3.jpg'),
          duration: '52:18',
          year: '2023'
        },
        {
          title: '电子幻想',
          artist: 'EDM大师',
          image: require('../assets/img/albums/4.jpg'),
          duration: '41:27',
          year: '2024'
        }
      ],
      featuredArtists: [
        {
          name: '林晓音',
          genre: '流行音乐',
          image: require('../assets/img/artists/1.jpg'),
          followers: '2.3M',
          tracks: '45'
        },
        {
          name: '摇滚之王',
          genre: '摇滚音乐',
          image: require('../assets/img/artists/2.jpg'),
          followers: '1.8M',
          tracks: '67'
        },
        {
          name: '爵士女神',
          genre: '爵士音乐',
          image: require('../assets/img/artists/3.jpg'),
          followers: '1.2M',
          tracks: '34'
        },
        {
          name: '电子先锋',
          genre: '电子音乐',
          image: require('../assets/img/artists/4.jpg'),
          followers: '3.1M',
          tracks: '89'
        }
      ],
      upcomingShows: [
        {
          title: '星空音乐节',
          venue: '上海大舞台',
          time: '19:30',
          price: '280',
          image: require('../assets/img/shows/1.jpg'),
          day: '15',
          month: 'Dec'
        },
        {
          title: '摇滚之夜',
          venue: '北京工体',
          time: '20:00',
          price: '350',
          image: require('../assets/img/shows/2.jpg'),
          day: '22',
          month: 'Dec'
        },
        {
          title: '爵士晚会',
          venue: '深圳音乐厅',
          time: '19:00',
          price: '180',
          image: require('../assets/img/shows/3.jpg'),
          day: '28',
          month: 'Dec'
        }
      ]
    }
  },
  async mounted() {
    this.init3DBackground()
    await this.loadHomeContent()
  },
  methods: {
    async loadHomeContent() {
      try {
        this.contentLoading = true
        this.contentError = null
        
        // 向本地Node.js API发请求
        const response = await axios.get('http://localhost:3001/api/content/home')
        
        if (response.data.success) {
          this.musicGenres = response.data.data.musicGenres || []
          this.platformStats = response.data.data.platformStats || []
        } else {
          throw new Error(response.data.message || '获取内容失败')
        }
      } catch (error) {
        console.error('Failed to load home content:', error)
        this.contentError = error.response?.data?.message || error.message || '无法连接到本地API服务器(localhost:3001)，请确保Node.js服务器已启动'
      } finally {
        this.contentLoading = false
      }
    },
    init3DBackground() {
      // Three.js 3D background setup
      const container = document.getElementById('hero-3d')
      if (!container) return

      const scene = new THREE.Scene()
      const camera = new THREE.PerspectiveCamera(75, container.offsetWidth / container.offsetHeight, 0.1, 1000)
      const renderer = new THREE.WebGLRenderer({ alpha: true })
      
      renderer.setSize(container.offsetWidth, container.offsetHeight)
      renderer.setClearColor(0x000000, 0)
      container.appendChild(renderer.domElement)

      // Create floating music notes
      const geometry = new THREE.SphereGeometry(0.1, 8, 6)
      const material = new THREE.MeshBasicMaterial({ 
        color: 0x4ecdc4,
        transparent: true,
        opacity: 0.6
      })

      const notes = []
      for (let i = 0; i < 50; i++) {
        const note = new THREE.Mesh(geometry, material)
        note.position.x = (Math.random() - 0.5) * 20
        note.position.y = (Math.random() - 0.5) * 20
        note.position.z = (Math.random() - 0.5) * 20
        note.userData = {
          velocity: {
            x: (Math.random() - 0.5) * 0.02,
            y: (Math.random() - 0.5) * 0.02,
            z: (Math.random() - 0.5) * 0.02
          }
        }
        scene.add(note)
        notes.push(note)
      }

      camera.position.z = 5

      // Animation loop
      const animate = () => {
        requestAnimationFrame(animate)

        notes.forEach(note => {
          note.position.add(note.userData.velocity)
          
          // Bounce off boundaries
          if (Math.abs(note.position.x) > 10) note.userData.velocity.x *= -1
          if (Math.abs(note.position.y) > 10) note.userData.velocity.y *= -1
          if (Math.abs(note.position.z) > 10) note.userData.velocity.z *= -1

          // Rotate
          note.rotation.x += 0.01
          note.rotation.y += 0.01
        })

        renderer.render(scene, camera)
      }

      animate()

      // Handle resize
      window.addEventListener('resize', () => {
        if (container.offsetWidth && container.offsetHeight) {
          camera.aspect = container.offsetWidth / container.offsetHeight
          camera.updateProjectionMatrix()
          renderer.setSize(container.offsetWidth, container.offsetHeight)
        }
      })
    }
  }
}
</script>

<style scoped>
/* Hero Section */
.hero-section {
  min-height: 100vh;
  background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 50%, #16213e 100%);
  overflow: hidden;
}

.hero-3d-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 2;
}

.hero-content {
  z-index: 3;
  position: relative;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.2;
  color: white;
}

.gradient-text {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}

.hero-image-container {
  position: relative;
}

.floating-card {
  position: relative;
  animation: float 3s ease-in-out infinite;
}

.floating-card img {
  border-radius: 20px;
  filter: brightness(1.1) contrast(1.1);
}

.music-visualizer {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 3px;
}

.bar {
  width: 4px;
  background: linear-gradient(to top, #ff6b6b, #4ecdc4);
  border-radius: 2px;
  animation: visualizer 1s ease-in-out infinite;
}

.floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.floating-note {
  position: absolute;
  color: rgba(78, 205, 196, 0.3);
  font-size: 2rem;
  animation: floatNote 6s ease-in-out infinite;
}

.note-1 {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.note-2 {
  top: 60%;
  right: 15%;
  animation-delay: 2s;
}

.note-3 {
  bottom: 30%;
  left: 20%;
  animation-delay: 4s;
}

/* Album Cards */
.album-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  transition: all 0.3s ease;
  overflow: hidden;
}

.album-card:hover {
  transform: translateY(-10px);
  background: rgba(255, 255, 255, 0.1);
}

.album-image-container {
  position: relative;
  overflow: hidden;
  border-radius: 15px 15px 0 0;
}

.album-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.album-card:hover .album-image {
  transform: scale(1.1);
}

.album-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.album-card:hover .album-overlay {
  opacity: 1;
}

.play-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  border: none;
  color: white;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.play-btn:hover {
  transform: scale(1.1);
}

.album-title {
  color: white;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.album-artist {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1rem;
}

.album-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Artist Cards */
.artist-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 400px;
}

.artist-image-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.artist-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.artist-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  padding: 2rem 1.5rem 1.5rem;
  color: white;
}

.artist-name {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.artist-genre {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1rem;
}

.artist-stats {
  display: flex;
  gap: 1rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}

/* Show Cards */
.show-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.show-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.1);
}

.show-image-container {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.show-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.show-date {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  padding: 0.5rem;
  text-align: center;
  color: #333;
}

.date-day {
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
}

.date-month {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
}

.show-title {
  color: white;
  font-weight: 600;
  margin-bottom: 1rem;
}

.show-venue,
.show-time {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.5rem;
}

.show-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
}

.price {
  font-size: 1.25rem;
  font-weight: bold;
  color: #4ecdc4;
}

/* Newsletter */
.newsletter-form .input-group {
  max-width: 500px;
  margin: 0 auto;
}

.newsletter-form .form-control {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 25px 0 0 25px;
}

.newsletter-form .form-control::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.newsletter-form .btn {
  border-radius: 0 25px 25px 0;
}

/* Animations */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes visualizer {
  0%, 100% {
    height: 10px;
  }
  50% {
    height: 30px;
  }
}

@keyframes floatNote {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-50px) rotate(180deg);
    opacity: 0.8;
  }
}

/* Section styles */
.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Music Genre Cards */
.genre-card {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2rem;
  height: 100%;
  transition: all 0.3s ease;
  text-align: center;
}

.genre-card:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: translateY(-10px);
  border-color: rgba(78, 205, 196, 0.5);
}

.genre-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 2rem;
  color: white;
}

.genre-title {
  color: white;
  font-weight: 600;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.genre-description {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.genre-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.feature-tag {
  background: rgba(78, 205, 196, 0.2);
  color: #4ecdc4;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  border: 1px solid rgba(78, 205, 196, 0.3);
}

/* Platform Stats */
.stat-card {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2rem;
  transition: all 0.3s ease;
}

.stat-card:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: translateY(-10px);
  border-color: rgba(78, 205, 196, 0.5);
}

.stat-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 1.8rem;
  color: white;
}

.stat-number {
  font-size: 3rem;
  font-weight: 800;
  color: white;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 1.2rem;
  font-weight: 600;
  color: white;
  margin-bottom: 0.5rem;
}

.stat-description {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

/* Enhanced Newsletter */
.newsletter small {
  font-size: 0.8rem;
}

.newsletter .btn {
  font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.1rem;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .genre-card {
    padding: 1.5rem;
  }
  
  .stat-number {
    font-size: 2.5rem;
  }
  
  .genre-description {
    font-size: 0.9rem;
  }
}
</style>
